template
<template>
  <div class="map-config-box">
    <base-attr></base-attr>
    <child-components @showChildComponent="showChildComponent"></child-components>
    <map-setting></map-setting>
    <!-- 子组件弹框 -->
    <div class="components-attr-wrapper" v-if="showComponent.isShow && childComponent">
      <component :is="childComponent"></component>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import BaseAttr from './components/base'
import MapSetting from './components/map-setting'
import ChildComponents from './components/childComponents/index.vue'
import { mapConfigComponnets } from './components/childComponents/index.js'
export default {
  name: 'BaseMapAttr',
  components: {
    BaseAttr,
    ChildComponents,
    MapSetting,
    ...mapConfigComponnets
  },
  provide(){
    return {
      showVisible: this.showComponent,
    }
 },
  data() {
    return {
      showComponent: {
        isShow: false
      },
      childComponent: ''
    };
  },
  computed: {

  },
  created() {

  },
  mounted() {
  },
  methods: {
    showChildComponent(data) {
      this.showComponent.isShow = true
      this.childComponent = data.component
    }
  }
};
</script>
<style lang="scss" scoped>
.components-attr-wrapper {
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    width: 380px;
    background: white;
    z-index: 2001;
    transition: all 0.28s;
    &.fadeInUp {
      top: 50px;
      opacity: 1;
    }
    &.fadeInDown {
      opacity: 0;
      top: 110%;
    }
  }
</style>
<style lang="scss" scoped>

</style>

